import { Button, Toast, Form, Input } from 'antd-mobile';
import React, { useState } from 'react';
import { message } from 'antd';
import { history } from 'umi';
import axios from 'axios';

export default function sendCode() {
  const [checked, setChecked] = useState<any>(false);
  const [value, setvalues] = useState<any>('');
  function checkhandle(e: any) {
    setChecked(e);
  }
  function back() {
    history.goBack(-1);
  }
  function skip() {
    history.push('/username');
  }
  async function onFinish(values: any) {
    setvalues(values);
    if (checked === true) {
      const data = await axios.post('/api/users/sendCode', values);
      if (data.data.code == 200) {
        message.success('验证码发送成功');
        history.push({
          pathname: '/inputCode',
          query: {
            captcha: data.data.captcha,
            effective: data.data.effective,
            time: data.data.time,
            phone: data.data.phone,
          },
        });
      } else if (data.data.code == 300) {
        Toast.show({
          icon: 'fail',
          content: '该手机号码未注册',
        });
        history.push('/register');
      }
    } else {
      Toast.show({ content: '请同意并勾选服务协议' });
    }
  }
  return (
    <div className="login-box">
      <div className="back" onClick={() => back()}>
        关闭
      </div>
      <div className="titles">
        <h2>登录/注册</h2>
      </div>
      <div className="inputs">
        <Form
          layout="horizontal"
          onFinish={onFinish}
          footer={
            <Button
              block
              type="submit"
              color="primary"
              size="large"
              style={{
                marginTop: '20px',
                background: '#FE723D',
                border: '0px',
              }}
            >
              发送验证码
            </Button>
          }
        >
          <Form.Item
            name="phone"
            label="+86"
            rules={[
              {
                pattern:
                  /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
                required: true,
                message: '请输入正确的手机号',
              },
            ]}
          >
            <Input onChange={console.log} placeholder="请输入手机号" />
          </Form.Item>
        </Form>
      </div>
      <div className="btn" style={{ marginTop: '23px' }}>
        <p onClick={() => skip()} style={{ color: '#FE723D' }}>
          使用密码登录
        </p>
      </div>
      <div className="check">
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => checkhandle(e.target.checked)}
        />
        <a href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html?spm=a2107.1.0.0.15c54265byUT94">
          &nbsp; &nbsp; &nbsp; &nbsp;我同意并遵守
          <span style={{ color: '#FE723D' }}>《使用协议》、《隐私政策》</span>
        </a>
      </div>
    </div>
  );
}
